
<template>
  <div class="box" v-if="modelValue">
  <div>我是子组件内容</div>
  <div>显示名称：{{ name }}</div>
  <input type="text" :value="name" @input="edit">
  <div>显示：{{ modelValue }}</div>
  <div @click="close">关闭</div>
</div>
</template>
<script setup lang="ts">

const props=defineProps<{
  modelValue:boolean,
  name:string,
  nameModifiers?:{
    isBt:boolean,
  }
}>()
const emit=defineEmits(['update:modelValue','update:name'])
const close=()=>{
  emit('update:modelValue',false)
}
const edit=(e:Event)=>{
  const target =e.target as HTMLInputElement
  emit('update:name',props.nameModifiers?.isBt?target.value+'xxx':target.value)

}
</script>

<style>
.box {
  width: 220px;
  height: 220px;
  background-color: red;
  position: absolute;
  top:50%;
  left: 50%; 
  transform: translate(-50%,-50%);
}
</style>